<template>
	<view class="content">
		<view v-if="isLogin">
			<image class="headicon" :src="'http://localhost:8090/foodapp/'+userInfo.icon"></image>
			<view class="text-area" v-if="isLogin">
				<text class="title">{{userInfo.nickname}}</text>
			</view>
		</view>
		
		<view v-if="!isLogin">
			<image class="headicon" :src="userInfo.icon"></image>
			<view class="text-area">
				<button type="primary" size="mini" @click="toLogin">点击登录</button>
			</view>
		</view>
		<view style="margin: 20rpx; width: 100%;">
			<view class="entry">个人信息</view>
			<view class="entry">订单列表</view>
			<view class="entry">修改密码</view>
			<view class="entry">意见反馈</view>
		</view>
		<button type="primary" size="default" style="width: 100%;" :disabled="!islogin" @click="logout">退出</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {
					userid: null,
					icon: 'pages/my',
					nickname: '',
					username: null
				},
				isLogin: false
			}
		},
		onShow() {
			this.getUserInfo();
		},
		onLoad() {
			
		},
		methods:{
			logout(){
				uni.setStorageSync('userinfo',null)
				this.islogin = false
				this.getUserInfo()
			},
			getUserInfo(){
				let userinfo = uni.getStorageSync('userinfo',null)
				if(userinfo){
					this.islogin = true
					this.userinfo = userinfo
				}
				else{
					this.islogin = false
					this.userinfo.icon = '/static/my.png' 
					}
			},
			toLogin(){
				uni.navigateTo({
					url:'/pages/my/login'
				})
			},
		}
	}
</script>
<style>
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	.headicon{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin: 100rpx;
	}
	.entry-wrapper{
		width: 90%;
		/* background-color: #888; */
		margin-top:50rpx;
	}
	.entry-wrapper .item{
		/*水平线性布局*/
		display: flex;
		flex-direction: row;
		/*子元素两端对齐*/
		justify-content: space-between;
		/*高度80rpx*/
		height: 80rpx;
		/*子元素在交叉轴上（y）居中对齐*/
		align-items: center;
		/*添加上下边框线*/
		border-bottom: #333 solid 1rpx;
	}
	.entry-wrapper .item:first-child{
		/*给第一个item加上边框线*/
		border-top: #333 solid 1rpx;
	}
	.entry-wrapper .item image{
		width: 48rpx;
		height: 48rpx;
	}
	button{
		width: 95%;
		margin-top: 50rpx;
	}
</style>